<template>
  <div class="container">
    <div class="row">
      <div class="time-box">
        <TimeLine :title="title" :timelineData="timelineData"></TimeLine>
      </div>
      <div class="content-box">
        <el-card class="box-card">
          <el-tabs v-model="activeName">
            <el-tab-pane label="患者基本信息" name="first">
              <div>
                <el-form ref="user" :model="userInfo" label-width="100px">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="患者姓名:" prop="username">
                        <el-input :disabled="true" v-model="userInfo.username" placeholder="请输入患者姓名" maxlength="30" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="手机号码:" prop="phone">
                        <el-input :disabled="true" v-model="userInfo.phone" placeholder="请输入手机号码" maxlength="11" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="年龄:" prop="age">
                        <el-input :disabled="true" v-model="userInfo.age" placeholder="请输入年龄" maxlength="11" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="用户性别:">
                        <el-select :disabled="true" v-model="userInfo.gender" placeholder="请选择性别">
                          <el-option
                            v-for="dict in dict.type.sys_user_sex"
                            :key="dict.label"
                            :label="dict.label"
                            :value="dict.label"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="身份证:">
                        <el-input :disabled="true" v-model="userInfo.identityCard"  placeholder="请输入身份证号码"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="地址:">
                        <el-input :disabled="true" v-model="userInfo.address" type="textarea" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="患者医疗就诊信息" name="second">
              <div class="content">
                <el-form ref="recordForm" :model="currentRecord" label-width="100px">
                  <div class="header">
                    <div class="line"></div>
                    <div class="text">患者病史和诉求</div>
                  </div>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="主要病症诉求:">
                        <el-input v-model="currentRecord.appeal" type="textarea" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="个人病史描述:">
                        <el-input v-model="currentRecord.message" type="textarea" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="现病史描述:">
                        <el-input v-model="currentRecord.message2" type="textarea" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="既往病逝:">
                        <el-input v-model="currentRecord.medicalHistoryDesc" type="textarea" placeholder="请输入内容"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div class="header">
                    <div class="line"></div>
                    <div class="text">患者住院信息</div>
                  </div>
                  <el-row style="display: flex; justify-content: space-between;">
                    <el-form-item label="患者来源:" prop="origin">
                      <el-input
                        v-model="currentRecord.origin"
                        placeholder="请输入患者来源"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                    <el-form-item label="费用类别:" prop="expenseCategory">
                      <el-input
                        v-model="currentRecord.expenseCategory"
                        placeholder="请输入费用类别"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                    <el-form-item label="费用:" prop="expense">
                      <el-input
                        v-model="currentRecord.expense"
                        placeholder="请输入费用"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                  </el-row>
                  <el-row style="display: flex; justify-content: space-between;">
                    <el-form-item label="就诊医院:" prop="hospital">
                      <el-input
                        v-model="currentRecord.hospital"
                        placeholder="请输入就诊医院名称"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                    <el-form-item label="科室:" prop="dept">
                      <el-input
                        v-model="currentRecord.dept"
                        placeholder="请输入科室名称"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                    <el-form-item label="医生:" prop="doctor">
                      <el-input
                        v-model="currentRecord.doctor"
                        placeholder="请输入医生姓名"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                  </el-row>
                  <el-row style="display: flex; justify-content: space-between;">
                    <el-form-item label="入院时间:" prop="admissionTime">
                      <el-date-picker
                        v-model="currentRecord.admissionTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期"
                        style="width: 200px">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="手术时间:" prop="surgeryTime">
                      <el-date-picker
                        v-model="currentRecord.surgeryTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期"
                        style="width: 200px">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="出院时间:" prop="leaveTime">
                      <el-date-picker
                        v-model="currentRecord.leaveTime"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期"
                        style="width: 200px">
                      </el-date-picker>
                    </el-form-item>
                  </el-row>
                  <el-row style="display: flex; justify-content: left;">
                    <el-form-item label="病床号:" prop="bedNumber">
                      <el-input
                        v-model="currentRecord.bedNumber"
                        placeholder="请输入就诊医院名称"
                        clearable
                        style="width: 200px"
                      />
                    </el-form-item>
                  </el-row>
                  <div class="file-box">
                    <div v-for="(item,index) in currentRecord.resourceList"  :key="index">
                      <img :src="item.imgPath" class="img"/>
                    </div>
                  </div>
                </el-form>
              </div>
              <div v-if="currentRecord.state==='2'" class="dialog-footer">
                <el-button type="primary" @click="submitForm">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
  </div>
</template>


<script>
    import TimeLine from '@/components/TimeLine'
    import { getRecordByUserId, updateRecord, processRecordInfo } from "@/api/wechat/record";
    import { changeUserState, getUser } from "@/api/wechat/user";
    export default {
        name: 'record',
        dicts: ['wx_user_state','sys_user_sex'],
        components: {
            TimeLine
        },
        data() {
            return{
                title: 'Medical Record',
                timelineData: [],
                recordList: [],
                userId: undefined,
                currentRecord: {},
                userInfo: {},
                record:undefined,
                // table切换
                activeName: 'first',
                // 表单校验
                rules: {
                }
            }
        },
        created() {
            const userId = this.$route.params && this.$route.params.userId;
            if (userId !== undefined && userId != 0) {
                this.userId = userId
                this.getUser()
                this.getRecordByUserId()
            }
        },
        methods: {
            /** 查询患者基本信息 */
            getUser(){
                getUser(this.userId).then(response => {
                    this.userInfo = response.data
                })
            },

            /** 查询患者医疗记录列表 */
            getRecordByUserId() {
                getRecordByUserId(this.userId).then(response => {
                    this.recordList = response.data
                    this.timelineData = []
                    if(response.data){
                        this.currentRecord = response.data[0]
                        response.data.forEach(record=>{
                            const person = record.auditBy
                            const content = "审核人：" + person
                            const time = this.moment(record.auditTime).format('YYYY-MM-DD')
                            var data = {
                                time: time,
                                content: content,
                                state: record.state,
                                record: record,
                            }
                            this.timelineData.push(data)
                        })
                    }
                });
            },

            /** 时间轴点击事件**/
            timeClick(data) {
                this.record = data.record
                this.reset()
            },

            /** 取消按钮 */
            cancel() {
                this.$router.push("/wxchat/user/process/" + '0000');
            },
            // 表单重置
            /** 表单重置 */
            reset() {
                this.currentRecord = this.record;
                this.resetForm("form");
            },

            /** 提交按钮 */
            submitForm: function() {
                this.$refs["recordForm"].validate(valid => {
                    if (valid) {
                        if (this.currentRecord.recordId != undefined) {
                            this.currentRecord.state = '1'
                            this.$delete(this.currentRecord,'resourceList')
                            console.log(this.currentRecord)
                            processRecordInfo(this.currentRecord).then(response => {
                                this.$modal.msgSuccess("提交成功");
                               // this.updateUserState(this.currentRecord.userId,"1")
                                this.getRecordByUserId();
                                this.$router.push("/wxchat/user/process/" + '0000');
                            });
                        }
                    }
                });
            },
            /** 更新用户状态**/
            updateUserState: function(userId,state){
                changeUserState(userId,state).then(response =>{

                })
            }

        }
    }
</script>

<style lang="scss" scoped>
  ::v-deep .el-tabs__content{
    height: calc(100vh - 179px);
    overflow-y: scroll;
  }

  ::v-deep .el-textarea__inner{
    width: 99.8%;
  }

  .container{
    width: 100%;
    height: calc(100vh - 84px);
    padding: 10px;
  }
  .row {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .time-box {
      width: 20%;
      height: 100%;
      box-shadow: 0px 1px 5px 0px #ccc;
      border: 1px solid white;
      border-radius: 8px;
    }

    .content-box {
      width: calc(80% - 10px);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .box-card {
        width: 100%;
        height: 100%;
      }


      .dialog-footer {
        width: 98%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: right;
        margin-bottom: 20px;
      }
    }
  }

  .header{
    height: 25px;
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    .line{
      width: 5px;
      height: 90%;
      background-color: #00afff;
      margin-right: 10px;
      border-radius: 4px;
    }
    .text{
      line-height: 100%;
      font-weight: 600;
      font-size: 14px;
    }
  }

  .file-box{
    padding: 0px 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin-bottom: 30px;

  }
  .file-box .img{
    width: 220px;
    height: 350px;
    border-radius: 5px;
    object-fit: contain;
    padding: 20px;
  }

</style>
